<template>
    <transition name='slide'>
        <div id="unBindPhone">
            <navbar :title="title"></navbar>
            <div class="placeholder"></div>
            <div class="form" v-if="ischecked==false">
                <div class="form-item">
                    <span class="label">
                        <i class="icon icon-phone"></i>
                        手机号
                    </span>
                    <div class="phonenumber" v-if="userInfo.phone">{{userInfo.phone | phoneFilter}}</div>
                </div>
                <div class="form-item">
                    <span class="label">
                        <i class="icon icon-code"></i>
                        验证码
                    </span>
                    <input type='text' class="phoneCode" name="phoneCode" placeholder="请输入验证码" v-model="phoneCode" autocomplete="off">
                    <div class="getCodeBtn">
                        <button @click="sendCode(1)" v-text="btnTxt" :disabled=btnStatus></button>
                    </div>
                </div>
                <div class="button">
                    <button @click="submit">验证</button>
                </div>
            </div>
            <div class="form" v-else>
                <div class="form-item">
                    <span class="label">
                        <i class="icon icon-phone"></i>
                        手机号
                    </span>
                    <input type="text" name="unbindPhone" placeholder="请输入想要绑定的手机号" v-model="unbindPhone" autocomplete="off">
                </div>
                <div class="form-item">
                    <span class="label">
                        <i class="icon icon-code"></i>
                        验证码
                    </span>
                    <input type='text' class="phoneCode" name="phoneCode" placeholder="请输入验证码" v-model="unbindCode" autocomplete="off">
                    <div class="getCodeBtn">
                        <button @click="sendCode(2)" v-text="btnTxt" :disabled=btnStatus></button>
                    </div>
                </div>
                <div class="button">
                    <button @click="unbind">确定</button>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
    import navbar from 'common/navbar'
    import { Toast } from 'vant'
    import { mapState} from 'vuex'
    import {sendCode,checkphone,checkCode,bindPhone} from 'api/login'
    export default {
        data(){
            return{
                title:'换绑手机',
                phoneCode:'',
                btnStatus:false,
                btnTxt:'获取验证码',
                ischecked:false,
                codeStatus:1,
                unbindCode:'',
                unbindPhone:'',
                codeTimer:null
            }
        },
        filters:{
            phoneFilter(phone){
               return  phone.substr(0, 3) + '****' + phone.substr(7); 
            }
        },
        methods:{
             sendCode(num){
                    this.codeStatus=num;
                    if(this.codeStatus==2){
                        let phonereg=/^[1][3,4,5,6,7,8][0-9]{9}$/;
                        if(this.unbindPhone.length==0){
                            Toast('请输入手机号');
                            return;
                        }else if(!phonereg.test(this.unbindPhone)){
                            Toast('请输入正确的手机号');
                            return
                        }else{
                            let _this=this;
                            new Promise(_this.sendCodeStep1).then(function(val){
                                return new Promise(_this.sendCodeStep2);
                            }).then(function(val){
                                return val;
                            }).catch(function(error) {
                                console.log('error: ' + error);
                            });
                        }
                        
                    }else{
                        let _this=this;
                        new Promise(_this.sendCodeStep1).then(function(val){
                            return new Promise(_this.sendCodeStep2);
                        }).then(function(val){
                            return val;
                        }).catch(function(error) {
                            console.log('error: ' + error);
                        });
                    }
            },
            sendCodeStep1(resolve,reject){
                if(this.codeStatus==1){
                    var phone=this.userInfo.phone;
                }else if(this.codeStatus==2){
                    var phone=this.unbindPhone;
                }
                checkphone(phone,this.codeStatus).then(res=>{
                    if(res.data.error==0){
                        resolve("检测完成")
                    }else{
                        reject("检测失败")
                    }
                })
            },
            sendCodeStep2(resolve,reject){
                if(this.codeStatus==1){
                    var phone=this.userInfo.phone;
                }else if(this.codeStatus==2){
                    var  phone=this.unbindPhone;
                }
                sendCode(phone).then(res=>{
                    if(res.data.error==0){
                        resolve("发送成功")
                        Toast("已成功发送");
                        let time=60;
                        this.codeTimer=setInterval(()=>{
                            this.btnStatus=true;
                            time--;
                            if(time<=0){
                                this.btnStatus=false;
                                this.btnTxt='重新获取';
                                clearInterval(this.codeTimer);
                            }else{
                                this.btnTxt=`${time}s`;
                            }
                        },1000)
                    }else{
                        reject("发送失败")
                    }
                });
            },
            submit(){
                checkCode(this.userInfo.phone,this.phoneCode).then(res=>{
                    if(res.data.error==0){
                        this.ischecked=true;
                        this.btnStatus=false,
                        this.btnTxt='获取验证码';
                        clearInterval(this.codeTimer);
                    }
                })
            },
            unbind(){
                bindPhone(this.unbindPhone,this.unbindCode,2).then(res=>{
                     if(res.data.error==0){
                         Toast("绑定成功");
                         this.userInfo.phone=this.unbindPhone;
                         setTimeout(()=>{
                             this.$router.replace({
                                path: '/userMsg'
                            });
                         },300)
                     }
                })
            }
        },
        computed:{
            ...mapState(['userInfo']),
        },
        components:{
            navbar
        }
    }
</script>

<style scoped lang="scss">
@import '~styles/variable.scss';
@import '~styles/mixins';
.slide-enter-active, .slide-leave-active{
    transition: all 0.3s;
}
.slide-enter, .slide-leave-to{
    transform: translate3d(100%, 0, 0);
}
.placeholder{
    width:100%;
    height:0.8rem;
}
#unBindPhone{
    position: fixed;
    z-index: 1001;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #fff;
}
.form{
    margin-top:0.72rem;
    .form-item{
        position:relative;
        margin: 0.3rem auto 0;
        padding:0 0.2rem 0 1.7rem;
        width: 6.64rem;
        height: 0.9rem;
        line-height: 0.9rem;
        border: 1px solid #cbcbcb;
        border-radius: 10px; 
        &:last-child{
            margin:0 auto;
        }
        input{
            width:100%;
            height:100%;
            line-height:100%;
            padding-left:0.12rem;
            border:none;
            box-sizing: border-box;
            font-size:0.28rem;
            background: transparent;
        }
        .phonenumber{
            width:100%;
            height:100%;
            padding-left:0.12rem;
            border:none;
            box-sizing: border-box;
            font-size:0.28rem;
            background: transparent;
        }
    .password{
        padding-right:0.6rem;
    }
    .label{
        position:absolute;
        top:50%;
        transform: translateY(-50%);
        left:0.3rem;
        font-size:$font-size-m;
        color:$color-text;
        .icon{
            display:inline-block;
            margin-right:0.1rem;
            background-size:100% 100%;
            background-repeat: no-repeat;
            vertical-align: top;
            &.icon-phone{
            width:0.3rem;
            height:0.48rem;
            margin-top:0.21rem;
            @include bg-image('../../assets/image/icon_phone');
            }
            &.icon-code{
            width:0.36rem;
            height:0.45rem;
            margin-top:0.22rem;
            @include bg-image('../../assets/image/icon_yzm');
            }
            &.icon-pwd{
                width:0.38rem;
                height:0.42rem;
                margin-top:0.24rem;
                @include bg-image('../../assets/image/icon_mima');
            }
        }
    }
    .getCodeBtn{
        position:absolute;
        top:50%;
        right:0.18rem;
        transform:translateY(-50%);
        button{
            width:1.6rem;
            height:0.5rem;
            line-height:0.5rem;
            font-size:0.24rem;
            color:#fff;
            background:$color-focus;
            border:none;
            border-radius:0.25rem;
            &:disabled{
                background:#ddd;
                color:#f9f9f9;
            }
        }
     }
    }
    .button{
        width:6.6rem;
        margin:0.8rem auto 0 auto;
    button{
        @include login-btn();
    }
    }
}
</style>